<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta
			http-equiv="origin-trial"
			content="Atzk/dTch1Tt8qYq/UwLn6aWawymlc3xOKy3xiuwsaj1HBK6eCTBb+EGOnv7LK+oSQ8Fr1l/qykGHhK64mAn+w4AAABjeyJvcmlnaW4iOiJodHRwczovL2hwdWdpcy5naXRodWIuaW86NDQzIiwiZmVhdHVyZSI6IldlYkdQVSIsImV4cGlyeSI6MTY5MTcxMTk5OSwiaXNTdWJkb21haW4iOnRydWV9"
		/>
		<title>box</title>
		<!-- <link rel="stylesheet" href="./index.scss" /> -->
		<style>
			* {
				box-sizing: border-box;
			}

			html {
				background: #692a84;
				background: linear-gradient(316deg, #0e0f2a, #060913);
				height: 100%;
				width: 100%;
			}

			body {
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				overflow: hidden;
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
			}

			#app {
				height: 100%;
				width: 100%;
			}
		</style>
		<!-- <script type="module" src="../dist/index.js"></script> -->
	</head>

	<body>
		<div id="app"></div>
		<script type="module">
			import {
				PerspectiveCamera,
				Scene,
				Vector3,
				OrbitControl,
				PointGeometry,
				Mesh,
				PointMaterial,
				Points,
				InterleavedFloat32Attribute
			} from "../../dist/index.js";
			const init = async () => {
				const scene = new Scene({
					container: "app"
				});
				const camera = new PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 3500);
				camera.position.set(0, 0, 2700);
				camera.lookAt(0, 0, 0);
				scene.setCamera(camera);
				const control = new OrbitControl(camera, document.getElementById("app"));
				control.zoomSpeed = 2.0;
				control.maxPolarAngle = Math.PI / 2;
				const geo = new PointGeometry();
				const mat = new PointMaterial();
				const numPoints = 500000;
				const n = 1000,
					n2 = n / 2; // particles spread in the cube
				const interleavedArray = [];
				for (let i = 0; i < numPoints; i++) {
					// position (first 12 bytes)
					const x = Math.random() * n - n2;
					const y = Math.random() * n - n2;
					const z = Math.random() * n - n2;
					// color (last 4 bytes)
					const vx = SRGBToLinear(x / n + 0.5);
					const vy = SRGBToLinear(y / n + 0.5);
					const vz = SRGBToLinear(z / n + 0.5);
					interleavedArray.push(...[x, y, z, vx, vy, vz]);
				}
				geo.setAttribute(new InterleavedFloat32Attribute(["position", "color"], interleavedArray, [3, 3]));
				const points = new Points(geo, mat, numPoints);
				points.vertexColor = true;
				points.size = 4;
				scene.add(points);

				function SRGBToLinear(c) {
					return c < 0.04045 ? c * 0.0773993808 : Math.pow(c * 0.9478672986 + 0.0521327014, 2.4);
				}
				function animate() {
					points.rotateY(0.01);
					points.rotateX(0.01);
					requestAnimationFrame(animate);
					control.update();
					scene.render();
				}
				animate();
			};
			init();
		</script>
	</body>
</html>
